<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>省市联动</title>
    </head>
    <body>

        <select class="p">
            <option value="none">请选择省份</option>
        </select>

        <select class="c">
            <option value="none">请选择城市</option>
        </select>

        <script type="text/javascript">
            let student = {
                'id': 1001 ,
                'name': '王燕' ,
                'gender': '靓妹' ,
                'hobby': [ '吃' , '睡' , '说' , '打' ]  
            }
            const pc = {
                '陕西省' : [ '西安市' , '宝鸡市' , '咸阳市' , '汉中市' , '榆林市' , '渭南市' , '延安市' , '商洛市' , '铜川市' ] ,
                '甘肃省' : [ '兰州市' , '武威市' , '酒泉市' , '张掖市' , '金昌市' , '嘉峪关市' , '天水水'  , '定西市' , '庆阳市' , '陇南市' , '临夏' , '白银市' , '平凉市' , '甘南' ],
                '四川省' : [ '成都市' , '攀枝花市' , '绵阳市' , '德阳市' , '广元市' , '泸州' , '宜宾市' ]
            }

            let names = Object.getOwnPropertyNames( pc );
            console.log( names );

            const p = document.querySelector( '.p' );
            names.forEach( n => {
                let e = document.createElement( 'option' );
                e.innerHTML = n ;
                e.value = n.substring( 0 , n.length - 1 ) ;
                // if( n === '甘肃省' ) {
                //     e.selected = true ; // 若option元素的selected为true则表示默认被选中
                // }
                p.appendChild( e );
            } );

            const c = document.querySelector( '.c' );

            let changeListener = {
                handleEvent(event){
                    let target = event.target ;
                    console.dir( target );
                    // 对于select来说，可以通过options来其内部所有的option组成的集合
                    let ops = target.options ;
                    console.dir( ops );
                    // 在options集合中有一个selectedIndex属性表示被选择的选项
                    let index = ops.selectedIndex ;
                    let op = ops[ index ];
                    console.log( op );
                    let pr = op.innerText ;
                    // 根据选择的元素获得相应省份对应的城市数组
                    let arr = pc[ pr ] ;
                    arr.forEach( cn => {
                        let e = document.createElement('option');
                        e.innerHTML = cn ;
                        e.value = cn.substring( 0 , cn.length - 1 );
                        c.appendChild( e );
                    });
                }
            }

            p.addEventListener( 'change' , changeListener , false );

        </script>
        
    </body>
</html>